<script  lang="ts" setup name="Person">
import {reactive ,toRefs ,toRef} from "vue";
  let person = reactive({
    name:'张三',
    age:18
  })

let {name,age}  = toRefs(person)
let nl = toRef(person,'age')
console.log(nl)
function changeName (){
  name.value += '~'
  console.log(name.value,person.name)
}
function changeAge  (){
  nl.value += 1
  console.log(age.value,person.age)
}
</script>

<template>
  <div class="prisonBox">
    <div>姓名：{{person.name}}</div>
    <div>年龄：{{person.age}} ==== {{nl}}</div>
    <button @click="changeName">姓名加~</button>
    <button @click="changeAge">年龄加一</button>
  </div>
</template>

<style scoped>
    .prisonBox{
      background-color:skyblue;
      padding: 20px;
      box-shadow: 0 0 10px;
      font-size: 20px;
      border-radius: 20px;
      button{
        margin: 0px 10px;
      }
    }
</style>